<template>
    <div class="item-banner" id="itemBanner">
        <!--<img class="banner-img" :src="staticImageUrl('images/kandian_advancing.png')" alt="">-->
        <div class="siwper-wrap">
            <div class="swiper-content">
                <div class="swiper-item" :class="{'active':key==1,'left':key==0,'right':key==2}" v-for="(value,key) in 5">
                    swiper{{value}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "itemBanner",
        data(){
            return{
                list:['']
            }
        },
        mounted(){
            this.slide();
        },
        methods:{
            slide(e){
                let startX,endX;
                // 在滑动的一定范围内，才切换图片
                let offset = 10;
                $('.swiper-item.active').on('touchstart',function (e) {
                    // 手指触摸开始时记录一下手指所在的坐标x
                    startX = e.originalEvent.touches[0].clientX;
                });
                $('.swiper-item.active').on('touchmove',function (e) {
                    // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
                    endX = e.originalEvent.touches[0].clientX;
                });
                $('.swiper-item.active').on('touchend',function (e) {
                    //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
                    //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
                    var distance = Math.abs(startX - endX);
                    if (distance > offset){
                        //说明有方向的变化
                        //根据获得的方向 判断是上一张还是下一张出现
                        if( startX > endX+5 ){
                            /*right: .9rem;
                            left: auto;*/
                            $(this).removeClass('active').css({
                                '-wekbit-transform': 'scale(1)',
                                'transform': 'scale(1)',
                                'right':'auto',
                                'left':'.9rem',
                                'z-index':'2',
                            });
                            $(this).nextSibling('.swiper-item').addClass('active').css({
                                '-wekbit-transform': 'scale(1.2)',
                                'transform': 'scale(1.2)',
                                'right':'auto',
                                'left':'auto',
                                'z-index':'4',
                            });
                            $(this).previousSibling('.swiper-item').removeClass('active').css({
                                '-wekbit-transform': 'scale(1)',
                                'transform': 'scale(1)',
                                'right':'auto',
                                'left':'0',
                                'z-index':'2',
                            });
                        }
                        else if( startX < endX-5 ){
                            $(this).removeClass('active').css({
                                'right':0,
                                'left':'auto'
                            });
                            $(this).nextSibling('.swiper-item').css({
                                'right':0,
                                'left':'auto'
                            });
                        }
                    }
                });
            },
            slideLeft(){

            },
            slideRight(){

            }
        },

    }
</script>

<style lang="scss" scoped>
    .banner-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .siwper-wrap{
        width: 100%;
        padding: .3rem;
    }
    .swiper-content{
        width: 1rem;
        height: 1rem;
        position: relative;
        display: block;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .swiper-item{
        transition: all 2s;
        position: absolute;
        width: 1rem;
        height: 1rem;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00ff00;
        top: 0;
    }
    .swiper-item.active{
        z-index: 4;
        background-color: #000;
    }
    .swiper-item.left{
        z-index: 2;
        background-color: #a80000;
        /*transform: scale(1) translateX(-30%);*/
        left: .9rem;
        right: auto;
    }
    .swiper-item.right{
        z-index: 2;
        background-color: #0D75AD;
        /*transform: scale(1) translateX(-30%);*/
        right: .9rem;
        left: auto;
    }
</style>